<template>
  <x-card :id="sectionId" class="demo-card" footer-style="padding: 0;" hoverable>
    <template #title>
      <div class="demo-title">{{ title }}</div>
    </template>
    <slot name="description" />
    <slot name="demo" />
    <template #header-extra>
      <x-tooltip :title="showCode ? '收起代码' : '显示代码'">
        <x-button link @click="showCode = !showCode"><x-icon type="code" /></x-button>
      </x-tooltip>
    </template>
    <template v-if="showCode" #footer>
      <x-tabs v-if="jsCode" v-model:value="showTs" :tabs="tabs" type="segment" style="padding: 14px 16px 0" />
      <x-code v-if="showTs" :code="rawCode" language="html" style="padding: 16px"></x-code>
      <x-code v-else :code="jsCode" language="html" style="padding: 16px"></x-code>
    </template>
  </x-card>
</template>

<script lang="ts">
import { ref, computed } from 'vue'
import type { ExtractPropTypes } from 'vue'
import { decode } from 'js-base64'

const props = {
  demoFileName: String,
  componentName: String,
  code: String,
  jsCode: String,
  title: String,
  relativeUrl: String
}

export type ComponentDemoProps = ExtractPropTypes<typeof props>

export default {
  name: 'ComponentDemo',
  props,
  setup(props) {
    const sectionId = computed(() => `component-${props.demoFileName}`)
    
    return {
      showCode: ref(false),
      showTs: ref(true),
      rawCode: decode(props.code),
      jsCode: decode(props.jsCode),
      tabs: [{ label: 'TypeScript', name: true }, { label: 'JavaScript', name: false }],
      sectionId
    }
  }
}
</script>
